<template>
    <span class="f-df" style="min-width:300px;">
        <svg @click="onChangePreTime" t="1697509824545" class="icon f-cp" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="3993" width="20" height="20">
            <path fill="currentColor" d="M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z" p-id="3994">
            </path>
        </svg>

        <!-- <a-date-picker  v-model:value="dayTime" picker="day" format="YYYY-MM-DD"
            :allowClear="false" /> -->
        <a-date-picker v-show="type == 'day'" v-model:value="data.value" @change="onChange" />

        <a-month-picker v-show="type == 'month'" v-model:value="data.value" @change="onChange" picker="month" format="YYYY-MM"
            :allowClear="false" />

        <a-date-picker v-show="type == 'year'" v-model:value="data.value" @change="onChange" picker="year" format="YYYY" :allowClear="false" />

        <svg @click="onChangeNextTime" t="1697509841671" class="icon f-cp" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="4139" width="20" height="20">
            <path fill="currentColor" d="M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z" p-id="4140">
            </path>
        </svg>
    </span>
</template>

<script setup>
import dayjs from 'dayjs';

import { ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount } from "vue";
const data = reactive({ value: "" });

// props接收数据
const props = defineProps({
    type: {
        type: String,
        default: function () {
            return "day"
        }
    },
    value: {
        default: function () {
            return dayjs(new Date())// 这个组件默认就是用dayjs处理
        }
    }
});

data.value = props.value;

// emit接收
const emit = defineEmits(["update:value","change"]);
const onChange = () => {
    emit('update:value', data.value);
    emitChange();
};


const emitChange = () => {
    if (props.type == 'month') {
        emit('change', data.value.format('YYYY-MM'));
    } 
    if (props.type == 'year') {
        emit('change', data.value.format('YYYY'));
    }
    if (props.type == 'day') {
        emit('change', data.value.format('YYYY-MM-DD'));
    }
}

watch(()=> props.type, (newValue, oldValue) => {
    emitChange();
    },{ deep: false,immediate: true  });

const onChangePreTime = () => {
    if (props.type == 'day') {
        data.value = data.value.subtract(1, 'day')
    }
    if (props.type == 'month') {
        data.value = data.value.subtract(1, 'month')
    }
    if (props.type == 'year') {
        data.value = data.value.subtract(1, 'year')
    }

    onChange()
}

const onChangeNextTime = () => {
    if (props.type == 'day') {
        data.value = data.value.add(1, 'day')
    }
    if (props.type == 'month') {
        data.value = data.value.add(1, 'month')
    }
    if (props.type == 'year') {
        data.value = data.value.add(1, 'year')
    }

    onChange();
}


</script>
<style lang="less" scoped>
.icon:hover {
    color: #1890ff;
}
</style>
  
